<template>
  <div class="container">
    <div class="person">
      <el-card style=" margin-left: -37px">
        <el-form label-width="80px" size="small">
          <el-upload

            class="avatar-uploader"
            :action="'http://' + serverIp +':8880/file/upload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
             accept=".jpg,.png,.webp"
            :before-upload="beforeUpload"
          >
            <img v-if="user.avatar" :src="user.avatar" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>

          <el-form-item label="用户名">
            <el-input v-model="user.username" disabled autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="昵称">
            <el-input v-model="user.nickname" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="角色">


            <template slot-scope="scope">
              <el-tag type="primary" v-if="user.role === 'ROLE_ADMIN'">超级用户</el-tag>
              <el-tag type="primary" v-if="user.role === 'ROLE_ROOT'">管理员</el-tag>
              <el-tag type="warning" v-if="user.role === 'ROLE_USER'">普通用户</el-tag>
              <el-tag type="success" v-if="user.role === 'ROLE_TEST'">测试用户</el-tag>
              <el-tag type="success" v-if="user.role === 'ROLE_TOURIST'">游客</el-tag>
            </template>

          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="user.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-input v-model="user.sex" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input type="textarea" v-model="user.address" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="save">确 定</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

<div>
    <el-divider direction="vertical"></el-divider>
  <div style="margin-left: 40px;margin-top: 20px">
      <span style="font-weight: bold;color: deepskyblue;">我的文案</span>
      <div style="margin-top: 20px">
        <span>雨纷纷</span>
        <el-divider direction="vertical"></el-divider>
        <span>旧故里</span>
        <el-divider direction="vertical"></el-divider>
        <span>草木深</span>
      </div>
      <div style="margin-top: 60px">
        <span>头上一片晴天，心中一个想念</span>
        <el-divider content-position="left">少年包青天</el-divider>
        <span>拿得起，放得下，路在脚下往前跨。没有过不去的坎，只有放不下的人</span>
        <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
        <span>为了无法计算的价值</span>
        <el-divider content-position="right">阿里云</el-divider>
        <span>没必要刻意遇见谁，也不急于遇见谁，更不勉强留住谁，一切顺其自然，最好的自己留给值得珍惜的人</span>
        <el-divider content-position="left">公子无双</el-divider>
        <span> 遇见的人多了，你才会明白哪些人值得用生命去珍惜，哪些人只适合绕道而行</span>
        <el-divider content-position="right">无名</el-divider>
        </div>
      </div></div>

  </div>
</template>

<script>
import {serverIp} from "../../../public/config";

export default {
  name: "Person",
  data() {
    return {
      serverIp: serverIp,
      form: {},
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
    }
  },
  methods: {
    beforeUpload(file) {
      console.log(file)
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isWEBP = file.type === 'image/webp';
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (isJPG || isPNG || isWEBP) {
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 5MB!');
        }else{
          return (isJPG ||isPNG|| isWEBP) && isLt2M;
        }
      }else{
        this.$message.error('上传头像图片只能是 JPG/PNG/WEBP 格式!');
      }




    },

  async getUser() {
    return (await this.request.get('/sys/username/' + this.user.username)).data
  },
  save() {
    this.request.put('/user/updateInfo', this.user).then(res => {
      console.log(res)
      if (res.code === 200) {
        this.$message.success("更新成功")

        // 触发父级更新User的方法
        this.$emit("refreshUser")

        // 更新浏览器存储的用户信息
        this.getUser().then(res => {
          res.token = JSON.parse(localStorage.getItem("user")).token
          localStorage.setItem("user", JSON.stringify(res))
          this.$router.go(0)
        })

      } else {
        this.$message.error("更新失败")
      }
    })
  },
  handleAvatarSuccess(res) {
      this.user.avatar = res
    // this.save()
  }
}
}
</script>

<style>
.avatar-uploader {
  text-align: center;
  padding-bottom: 10px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 138px;
  height: 138px;
  line-height: 138px;
  text-align: center;
}

.avatar {
  width: 138px;
  height: 138px;
  display: block;
}

.container{
  display:flex;
}
.person {
  width: 500px;
}


@media screen and (max-width: 440px) {
  .container{
    display: contents
  }
  .person {
    width: 100%;
  }
}

@media only screen and (min-width:600px) and (max-width:1200px){
  .person {
    width: 100%;
  }

}

@media only screen and (min-width:440px) and (max-width:599px){
  .person {
    width: 80%;
  }
  .container{
    display: contents
  }
}
</style>
